<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .todo-container{
        max-width: 600px;
        padding: 30px;
        border: 1px solid #ccc;
        border-radius: 15px;
        margin: 20px auto;
      }
      .todo-header{
        height: 80px;
        display: flex;
        align-items: center;
        
      }
      .todo-input{
        flex: 1;
        height: 60px;
        border-radius:10px;
      }
      .todo-lists{
        margin-top: 30px;
      }
      .todo-item{
        height: 40px;
        line-height: 40px;
        border-bottom: 1px solid #333;
      }
      .actions{
        float: right;
      }
      .todo-done{
        text-decoration: line-through;
        background-color: #beb9b9;
      }
      .todo-undone{
        background-color: #2bd689;
      }
      [v-cloak] {
        display: none;
      }
    </style>
  </head>
  <body>
    <div id="app">
      <div class="todo-container" v-cloak>
        <div class="todo-header">
          <input type="text" v-model.trim="todoInput" class="todo-input">
          <button class="add" @click="addTodo">增加</button>
        </div>
        <div class="todo-lists">
          <div class="todo-item" v-if="todos.length === 0">
            暂无待办事项
          </div>
          <div :class="['todo-item', {
            'todo-done': todo.done,
            'todo-undone': !todo.done
          }]" v-for="(todo, index) in todos">
            <span>
              {{todo.content}}
              {{index}}
            </span>
            <div class="actions">
              <button @click="delTodo(index)">删除待办事项</button>
              <input type="checkbox" v-model="todo.done">
            </div>
          </div>
        </div>
      </div>

      已完成待办事项有 {{doneTodoLength()}} <br> {{doneTodoLength()}} <br>  {{doneTodoLength()}}条
      <hr>
      {{doneTodoLength2}} <br>  {{doneTodoLength2}} <br> {{doneTodoLength2}}条
    </div>
    <script src="./vue.global.js"></script>
    <script>
      const { createApp } = Vue;
      const app = createApp({
        data() {
          return {
            todoInput: '',
            todos: [
              {
                content: '明天记得带伞',
                done: false
              },
              {
                content: '内容2',
                done: true
              },
              {
                content: '内容3',
                done: false
              }
            ]
          };
        },
        methods: {
          addTodo() {
            if (this.todoInput === ''){
              return false;
            }
            this.todos.push({
              content: this.todoInput,
              done: false
            })
            this.todoInput = '';
          },
          delTodo(index){
            if(confirm('确定删除吗')){
              this.todos.splice(index, 1);
            }
          },
          doneTodoLength(){
            console.log('method调用');
            return this.todos.filter(item => item.done).length;
          }
        },
        // 计算属性
        computed: {
          doneTodoLength2(){
            console.log('计算属性调用');
            return this.todos.filter(item => item.done).length;
          }
        },
        mounted(){
          console.log(this);
        }
      });
      app.mount("#app");
    </script>
  </body>
</html>
